<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />

<link rel="stylesheet" type="text/css" href="static/h-ui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui/css/link.css" />

<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>运输管理</title>

<style>
	.ui-timeLine {
		padding: 10px 0;
		position: relative;
		overflow: hidden;
	}
	
	.ui-timeLine>.item {
		display: block;
		position: relative;
		text-align: justify;
		text-justify: newspaper;
		word-break: break-all;
		padding-left: 20px;
		color: #fff;
		padding-right: 10px;
	}
	
	.ui-timeLine>.item>.box {
		padding: 5px 0;
	}
	
	.ui-timeLine>.item .cbox {
		/* position: relative; */
		/* left: 100vw; */
		left: 100px;
		transition: left 1s;
		padding: 10px;
		border-radius: 10px;
		background-image: linear-gradient(45deg, rgba(0, 200, 255, 0.4) 0%, rgba(132, 43, 171, 0.4) 100%);
		box-shadow: 3px 3px 8px #ccc;
	}
	
	.ui-timeLine>.item .cboxleft {
		/* position: relative; */
		/* left: 100vw; */
		left: 100px;
		transition: left 1s;
		padding: 10px;
		color:black;
		
	}
	
	.ui-timeLine>.item::after {
		content: "";
		display: block;
		clear: both;
	}
	
	.ui-timeLine .dot {
		z-index: 100;
		display: inline-block;
		position: absolute;
		/* left: 25px; */
		left: 141px;
		top: 0;
		padding: 3px;
		border: 3px solid #eee;
		border-radius: 20px;
		background-color: #fff;
		box-shadow: 3px 3px 8px #ccc;
		transition: .5s;
	}
	
	.ui-timeLine .active {
		border: 3px solid rgba(132, 43, 171, .8);
	}
	
	.ui-timeLine .line,
	.ui-timeLine>.activeLine {
		position: absolute;
		/* left: 29px; */
		left: 145px;
		width: 4px;
		height: 100%;
		background-color: rgba(0, 200, 255, .8);;
	}
	
	.ui-timeLine .date {
		font-size: 12px;
		font-weight: 900;
	}
	
	.ui-timeLine .title {
		font-size: 16px;
		font-weight: 900;
	/* 	line-height: 30px; */
	}
	
	.ui-timeLine .types>span {
		font-size: 10px;
		border-radius: 5px;
		padding: 2px 10px;
		margin-right: 10px;
		border: 1px solid #fff;
	}
	
	.ui-timeLine>.activeLine {
		background-color: rgba(0, 200, 255, .8);
		z-index: 50;
		top: 30px;
		height: 0;
		max-height: calc(100% - 80px);
		transition: height 1s;
		box-shadow: 3px 3px 2px #eee;
	}
	
</style>

</head>
<body >
	<div class="ui-timeLine">
		<a v-for="item in items" class="item">
			<div class="line"></div>
			<div class="dot"></div>
			<div class="box" style="float: left; width: 20%;">
				<div class="cboxleft">
					<div class="title" >{{item.title}}</div>
					
				</div>
			</div>
			
			<div class="box"  style="float: left;width: 65%; margin-left: 20px;">
				<div class="cbox">
					<div class="date">{{item.date}}</div>
				</div>
			</div>
		</a>
		<div class="activeLine">
		</div>
	</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript" src="js/workplan.js"></script>
<script type="text/javascript" src="js/vue.js" charset="utf-8"></script>


<script>
	var userinfo =getUserInfo();
	var companyId = "";
	var officeId ="";
	var titleName ="";
	var username =userinfo.username;
	var stepType ="";
	(function($) {
		$.fn.uiTimeLine = function() {
			var $timeLine = $(".ui-timeLine");
			var $activeLine = $(".ui-timeLine .activeLine");
			var $dots = $(".ui-timeLine .dot");
			var $cboxs = $(".ui-timeLine .item .cbox");
			
			return this.each(function() {
			
				function setActiveLineHeight() {
					let height = $(document).scrollTop() + window.screen.height;
					let j = 0;
					for (let i = 0; i < $dots.length; i++) {
					console.log(i);
						if ($($dots[i]).offset().top < height) {
							$($($dots[i])).addClass("active");
							$($cboxs[i]).css({
								"left": 0
							});
							j = i;
						} else {
							$($($dots[i])).removeClass("active")
							$($cboxs[i]).css({
								"left": "100vw"
							});
						}
					}
					$activeLine.css({
						"height": $($dots[j]).offset().top - $timeLine.offset().top + 40 + "px"
					})
				}
				$(window).on('scroll', setActiveLineHeight);
				setActiveLineHeight();
			})
		}
			
		quer();
	})(jQuery);
	
	
	function quer(){
				var url = location.search; //获取url中"?"符后的字串
						var strs = '';
						if (url.indexOf("?") != -1) { //判断是否有参数
							var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
							strs = str.split("&"); //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
							console.log("==="+strs[0]+"/"+strs[1]); //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
							companyId = strs[0].substr(strs[0].indexOf("=")+1,strs[0].length);//id=C0000027
							officeId = strs[1].substr(strs[1].indexOf("=")+1,strs[1].length);;//step=1
							titleName = strs[2].substr(strs[2].indexOf("=")+1,strs[2].length);;//step=1
						}
						stepType="gjjt"	
						$.ajax({
							type: 'get',
							url: report_service+'/getAllCompany',
							/* beforeSend: function (request) {
											request.setRequestHeader("Authorization", "Bearer " + getToken());
										}, */
							dataType: 'json',
							async: false,
							success: function(data){
								var list =  eval('(' + data.list + ')');
								for(var i = 0;i<list.length;i++){
									$("#comId").append("<option value='"+list[i].companyid+"'>"+list[i].companyname+"</option>");				
								}
							},
							error: function(data){
								console.log(data.msg);
							}
						});
						
						$.ajax({
							type: 'get',
							url: report_service+'/getUserByname',
							data:{
								"username": username
							},
							async: false,
							/* beforeSend: function (request) {
											request.setRequestHeader("Authorization", "Bearer " + getToken());
										}, */
							dataType: 'json',
							success: function(data){
								var list =  eval('(' + data.list + ')');
								if(list[0].officeId.indexOf("1")==0){
									$("#comId").val(list[0].companyId);
									comId = list[0].companyId;
									
									$.ajax({
										type: 'get',
										url: report_service+'/getTicktOfficeByCom',
										/* beforeSend: function (request) {
														request.setRequestHeader("Authorization", "Bearer " + getToken());
													}, */
										data:{
											"comId":comId
										},
										cache:false,    
										dataType:'json',
										async: false,
										success: function(data){
											stepType="office";
										
										},
										error:function(){
											alert("请求失败");
										}
									});
								
								}
								if(list[0].officeId.indexOf("1") == -1  && list[0].companyId.indexOf("1")==0 ){
									$("#comId").val(list[0].companyId);
									comId = list[0].companyId;
									$.ajax({
										type: 'get',
										url: report_service+'/getTicktOfficeByCom',
										/* beforeSend: function (request) {
														request.setRequestHeader("Authorization", "Bearer " + getToken());
													}, */
										data:{
											"comId":comId
										},
										cache:false,    
										dataType:'json',
										async: false,
										success: function(data){
											stepType="company";
											
										},
										error:function(){
											alert("请求失败");
										}
									});
								}
								
								
								
								
							},
							error: function(data){
								console.log(data.msg);
							}
						});
			
				queryTable(companyId,officeId,titleName)	
	}
		function queryTable(companyId,officeId,titleName){
			$.ajax({
				type: 'post',
				url:reportForm+'workPlan/queryProcess',
				data: {
					companyId:companyId,
					officeId:officeId,
					titleName:titleName
				},
				dataType: 'json',
				success: function(data){
					
					 //var d = document.getElementsByTagName('li'); // 获取所有li元素
					 
					 var d = document.getElementsByClassName("title")
					var workPlanList= data.workPlanList;
					console.log(workPlanList[0].step)
					if("00"==workPlanList[0].step){
						 d[0].style="color: red; text-align: left;";
						 d[0].innerHTML = d[0].innerHTML +"&emsp;*&emsp;";
					}else if("01"==workPlanList[0].step){
						if("company"==stepType){
						 d[1].style="color: red; text-align: left;";
						 d[1].innerHTML = d[1].innerHTML +"&emsp;*";
						}else{
						 d[2].style="color: red; text-align: left;";
						 d[2].innerHTML = d[2].innerHTML +"&emsp;*";
						}
		
					}
					else if("02"==workPlanList[0].step){
						 d[3].style="color: red; text-align: left;";
						 d[3].innerHTML = d[3].innerHTML +"&emsp;*";
					}
					else if("03"==workPlanList[0].step){
						 d[3].style="color: red; text-align: left;";
						 d[3].innerHTML = d[3].innerHTML +"&emsp;*";
					}
					else if("04"==workPlanList[0].step){
						 d[3].style="color: red; text-align: left;";
						 d[3].innerHTML = d[3].innerHTML +"&emsp;*";
					}
					
				},
				error:function(data) {
					console.log(data.msg);
				},
			});
		}
	
</script>
<script>

	var vue_data = new Vue({
		el: ".ui-timeLine",
		data: {
			items: [
						{title:"1.分公司填报",date:"分公司填报运输计划，可批量导入也可单个票务室添加。",sty:"red"},
						{title:"2.分公司提交",date:"编辑确认后，需选择机会批量提交。"},
						{title:"3.物流确认",date:"物流对分公司提交的计划进行确认，通过后提交给集团审核。"},
						{title:"4.集团发布",date:"集团认可运输计划后，可直接发布，不认可则有分公司重新修改。"}
					],
		},
		mounted: function() {
			$(".ui-timeLine").uiTimeLine();
		},
	});


</script>
</body>
</html>